<template>
  <!-- <div class="shoppingCart">
    <div class="labelNav acea-row row-around row-middle">
      <div class="item">
        <span class="iconfont icon-xuanzhong"></span>100%正品保证
      </div>
      <div class="item">
        <span class="iconfont icon-xuanzhong"></span>所有商品精挑细选
      </div>
      <div class="item">
        <span class="iconfont icon-xuanzhong"></span>售后无忧
      </div>
    </div>
    <div class="nav acea-row row-between-wrapper">
      <div>
        购物数量 <span class="num font-color-red">{{ count }}</span>
      </div>
      <div
        v-if="cartList.valid.length > 0"
        class="administrate acea-row row-center-wrapper"
        @click="manage"
      >
        {{ footerswitch ? "取消" : "管理" }}
      </div>
    </div>
    <div v-if="cartList.valid.length > 0 || cartList.invalid.length > 0">
      <div class="list">
        <div
          class="item acea-row row-between-wrapper"
          v-for="(item, index) in cartList.valid"
          :key="index"
        >
          <div class="select-btn">
            <div class="checkbox-wrapper">
              <label class="well-check">
                <input
                  type="checkbox"
                  name=""
                  value=""
                  :checked="item.checked"
                  @click="switchSelect(index)"
                />
                <i class="icon"></i>
              </label>
            </div>
          </div>
          <div class="picTxt acea-row row-between-wrapper">
            <div
              class="pictrue"
              @click="$router.push({ path: '/detail/' + item.product_id })"
            >
              <img
                :src="item.productInfo.attrInfo.image"
                v-if="item.productInfo.attrInfo"
              />
              <img :src="item.productInfo.image" v-else />
            </div>
            <div class="text">
              <div class="line1">{{ item.productInfo.store_name }}</div>
              <div class="infor line1" v-if="item.productInfo.attrInfo">
                属性：{{ item.productInfo.attrInfo.suk }}
              </div>
              <div class="money">￥{{ item.truePrice }}</div>
            </div>
            <div class="carnum acea-row row-center-wrapper">
              <div
                class="reduce"
                :class="cartList.valid[index].cart_num <= 1 ? 'on' : ''"
                @click.prevent="reduce(index)"
              >
                -
              </div>
              <div class="num">{{ item.cart_num }}</div>
              <div
                class="plus"
                v-if="cartList.valid[index].attrInfo"
                :class="
                  cartList.valid[index].cart_num >=
                  cartList.valid[index].attrInfo.stock
                    ? 'on'
                    : ''
                "
                @click.prevent="plus(index)"
              >
                +
              </div>
              <div
                class="plus"
                v-else
                :class="
                  cartList.valid[index].cart_num >= cartList.valid[index].stock
                    ? 'on'
                    : ''
                "
                @click.prevent="plus(index)"
              >
                +
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="invalidGoods" v-if="cartList.invalid.length > 0">
        <div class="goodsNav acea-row row-between-wrapper">
          <div @click="goodsOpen">
            <span
              class="iconfont"
              :class="goodsHidden === true ? 'icon-xiangyou' : 'icon-xiangxia'"
            ></span
            >失效商品
          </div>
          <div class="del" @click="delInvalidGoods">
            <span class="iconfont icon-shanchu1"></span>清空
          </div>
        </div>
        <div class="goodsList" :hidden="goodsHidden">
          <router-link
            :to="{ path: '/detail/' + item.product_id }"
            class="item acea-row row-between-wrapper"
            v-for="(item, index) in cartList.invalid"
            :key="index"
          >
            <div class="invalid acea-row row-center-wrapper">失效</div>
            <div class="pictrue">
              <img
                :src="item.productInfo.attrInfo.image"
                v-if="item.productInfo.attrInfo"
              />
              <img :src="item.productInfo.image" v-else />
            </div>
            <div class="text acea-row row-column-between">
              <div class="line1">{{ item.productInfo.store_name }}</div>
              <div class="infor line1" v-if="item.productInfo.attrInfo">
                属性：{{ item.productInfo.attrInfo.suk }}
              </div>
              <div class="acea-row row-between-wrapper">
                <div class="end">该商品已下架</div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    购物车暂无商品
    <div
      class="noCart"
      v-if="cartList.valid.length === 0 && cartList.invalid.length === 0"
    >
      <div class="pictrue"><img src="@assets/images/noCart.png" /></div>
      <Recommend></Recommend>
    </div>
    <div style="height:2.1rem"></div>
    <div
      class="footer acea-row row-between-wrapper"
      v-if="cartList.valid.length > 0"
    >
      <div>
        <div class="select-btn">
          <div class="checkbox-wrapper">
            <label class="well-check">
              <input
                type="checkbox"
                name=""
                value=""
                :checked="isAllSelect && cartCount > 0"
                @click="allChecked"
              />
              <i class="icon"></i>
              <span class="checkAll">全选 ({{ cartCount }})</span>
            </label>
          </div>
        </div>
      </div>
      <div class="money acea-row row-middle" v-if="footerswitch === false">
        <span class="font-color-red">￥{{ countmoney }}</span>
        <div class="placeOrder bg-color-red" @click="placeOrder">立即下单</div>
      </div>
      <div class="button acea-row row-middle" v-else>
        <div class="bnt cart-color" @click="collectAll">收藏</div>
        <div class="bnt" @click="delgoods">删除</div>
      </div>
    </div>
  </div> -->
  <el-container>
  <el-header height="172px" class="c-header">
    <HomeNavigation></HomeNavigation>
    <SearchBox></SearchBox>
    <ClassNavigation></ClassNavigation>
  </el-header>
  <el-main class="c-main">
    <div class="m-body" v-if="cartList.valid.length > 0 || cartList.invalid.length > 0">
      <div class="b-tt acea-row">
        <div class="t-chkbox acea-row">
          <div class="c-input">
           <el-checkbox 
            :checked="isAllSelect && cartCount > 0"
             @click="allChecked"></el-checkbox>
          </div>
          <div class="c-all">全选</div>
        </div>
        <div class="t-w2">商品信息</div>
        <div class="t-w3">单价</div>
        <div class="t-w4">数量</div>
        <div class="t-w5">小计</div>
        <div class="t-w6">操作</div>
      </div>
      <div class="b-item acea-row" 
        v-for="(item, index) in cartList.valid"
        :key="index">
        <div class="i-1">
          <el-checkbox 
            :checked="item.checked"
            @click="switchSelect(index)">
          </el-checkbox></div>
        <div class="i-2 ">
          <img
            :src="item.productInfo.attrInfo.image"
            v-if="item.productInfo.attrInfo"/>
          <img :src="item.productInfo.image" v-else />
        </div>
        <div class="i-3">
          <div class="name">{{ item.productInfo.store_name }}</div>
          <div class="text" v-if="item.productInfo.attrInfo"> 属性：{{ item.productInfo.attrInfo.suk }}</div>
        </div>
        <div class="i-4">￥{{ item.truePrice }}</div>
        <div class="i-5 acea-row row-center-wrapper">
          <div class="num acea-row" >
            <div style="margin-top:10px;" class="acea-row">
              <div
                class="numList2"
                :class="cartList.valid[index].cart_num <= 1 ? 'on' : ''"
                @click.prevent="reduce(index)"
              >
                <p class="el-icon-minus"></p>
              </div>
              <p class="numList3">{{ item.cart_num }}</p>
              <div
                class="numList2"
               
                 @click.prevent="plus(index)"
              >
                <p class="el-icon-plus"></p>
              </div>
            </div>
          </div>
        </div>
        <div class="i-6 acea-row row-right" >¥{{item.truePrice*item.cart_num}}</div>
        <div class="i-7">
          收藏
        </div>
      </div>
      <div class="b-total acea-row">
        <div class="t-w1 acea-row row-left">
          <div class="acea-row row-center-wrapper">
            <div class="l1 acea-row">
              <div class="l-input">
                <el-checkbox 
                :checked="isAllSelect && cartCount > 0"
                @click="allChecked">
                </el-checkbox>
              </div>
              <div class="l-all acea-row">全选({{ cartCount }})</div>
            </div>
            <div class="l2" @click="delgoods">批量删除</div>
            <div class="l3" @click="collectAll">收藏商品</div>
          </div>
        </div>
        <div class="t-w2">
          <div class="line1 acea-row">
            <div class="label">商品合计 :</div>
            <div class="num acea-row row-right">¥{{ countmoney }}</div>
          </div>
           <div class="l2 acea-row">
            <div class="label">已优惠 :</div>
            <div class="num acea-row row-right">0</div>
          </div>
        </div>
        <div class="t-w3">
          <div class="pay acea-row">
            <div class="p1">应付总额：</div>
            <div class="p2 acea-row row-right">¥{{ countmoney }}</div>
            <div class="line acea-row row-right">已满足免邮条件</div>
            <div class="line acea-row row-right" v-if="false">未满足免邮条件</div>
          </div>
        </div>
        <div class="t-w4" @click="placeOrder">下单</div>
      </div>
    </div>
    <div class="noCart  acea-row row-center-wrapper" v-else>
      <div >
        <div class="image">
          <img src="@assets/images/noCart.png" />
        </div>
        <div class="btn  acea-row row-center-wrapper">
          <router-link
            :to="'/'"
            >
            <el-button plain ><p>继续逛</p></el-button>
          </router-link>
        </div>
      </div>
    </div>
  </el-main>
  <el-footer style="padding: 0;">
    <Foot></Foot>
  </el-footer>
</el-container>
</template>
<script>
import Recommend from "@components/Recommend";
import Foot from "@components/Foot";
import {
  getCartList,
  postCartDel,
  changeCartNum,
  getCartCount
} from "@api/store";
import { postCollectAll } from "@api/user";
import { mul, add } from "@utils/bc";
import cookie from "@utils/store/cookie";
import debounce from "lodash.debounce";
import HomeNavigation from "@components/HomeNavigation";
import SearchBox from "@components/SearchBox";
import ClassNavigation from "@components/ClassNavigation";

const CHECKED_IDS = "cart_checked";

export default {
  name: "ShoppingCart",
  components: {
    Recommend,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  props: {},
  data: function() {
    return {
      cartList: { invalid: [], valid: [] },
      isAllSelect: false,
      cartCount: 0,
      countmoney: 0,
      goodsHidden: true,
      footerswitch: false,
      count: 0,
      checkedIds: [],
      loaded: false
    };
  },
  watch: {
    $route(n) {
      if (n.name === "ShoppingCart") {
        this.carnum();
        this.countMoney();
        this.getCartList();
        this.gainCount();
        this.goodsHidden = true;
        this.footerswitch = false;
      }
    }
  },
  mounted: function() {
    let that = this;
    that.carnum();
    that.countMoney();
    that.getCartList();
    that.gainCount();
  },
  methods: {
    getCartList: function() {
      let that = this;
      getCartList().then(res => {
        that.cartList = res.data;
        let checkedIds = cookie.get(CHECKED_IDS) || [];
        if (!Array.isArray(checkedIds)) checkedIds = [];
        this.cartList.valid.forEach(cart => {
          if (checkedIds.length) {
            if (checkedIds.indexOf(cart.id) !== -1) cart.checked = true;
            else cart.checked = false;
          } else {
            cart.checked = true;
            that.checkedIds.push(cart.id);
          }
        });
        if (checkedIds.length) {
          that.checkedIds = checkedIds;
        }
        that.isAllSelect =
          that.checkedIds.length === this.cartList.valid.length;
        that.carnum();
        that.countMoney();
        this.loaded = true;
      });
    },
    //删除商品；
    delgoods: function() {
      let that = this,
        id = [],
        valid = [],
        list = that.cartList.valid;
      list.forEach(function(val) {
        if (val.checked === true) {
          id.push(val.id);
        }
      });
      if (id.length === 0) {
        that.$dialog.toast({ mes: "请选择产品" });
        return;
      }
      postCartDel(id).then(function() {
        list.forEach(function(val, i) {
          if (val.checked === false || val.checked === undefined)
            valid.push(list[i]);
        });
        that.$set(that.cartList, "valid", valid);
        that.carnum();
        that.countMoney();
        that.gainCount();
      });
    },
    // //获取数量
    gainCount: function() {
      let that = this;

      getCartCount().then(res => {
        that.count = res.data.count;
      });
    },
    //清除失效产品；
    delInvalidGoods: function() {
      let that = this,
        id = [],
        list = that.cartList.invalid;
      list.forEach(function(val) {
        id.push(val.id);
      });
      postCartDel(id).then(function() {
        list.splice(0, list.length);
        that.gainCount();
      });
    },
    //批量收藏;
    collectAll: function() {
      let that = this,
        data = { id: [], category: "" },
        list = that.cartList.valid;
      list.forEach(function(val) {
        if (val.checked === true) {
          data.id.push(val.product_id);
          data.category = val.type;
        }
      });
      if (data.id.length === 0) {
        that.$dialog.toast({ mes: "请选择产品" });
        return;
      }
      postCollectAll(data).then(function() {
        that.$dialog.toast({ mes: "收藏成功!" });
      });
    },
    //立即下单；
    placeOrder: function() {
      let that = this,
        list = that.cartList.valid,
        id = [];
      list.forEach(function(val) {
        if (val.checked === true) {
          id.push(val.id);
        }
      });
      if (id.length === 0) {
        that.$dialog.toast({ mes: "请选择产品" });
        return;
      }
      this.$router.push({ path: "/order/submit/" + id });
    },
    manage: function() {
      let that = this;
      that.footerswitch = !that.footerswitch;
    },
    goodsOpen: function() {
      let that = this;
      that.goodsHidden = !that.goodsHidden;
    },
    //加
    plus: function(index) {
      let that = this;
      let list = that.cartList.valid[index];
      list.cart_num++;
      if (list.attrInfo) {
        if (list.cart_num >= list.attrInfo.stock) {
          that.$set(list, "cart_num", list.attrInfo.stock);
        }
      } else {
        if (list.cart_num >= list.stock) {
          that.$set(list, "cart_num", list.stock);
        }
      }
      that.carnum();
      that.countMoney();
      that.syncCartNum(list);
    },
    //减
    reduce: function(index) {
      let that = this;
      let list = that.cartList.valid[index];
      list.cart_num--;
      if (list.cart_num < 1) {
        that.$set(list, "cart_num", 1);
      }
      that.carnum();
      that.countMoney();
      that.syncCartNum(list);
    },
    syncCartNum(cart) {
      if (!cart.sync)
        cart.sync = debounce(() => {
          changeCartNum(cart.id, Math.max(cart.cart_num, 1) || 1);
        }, 500);

      cart.sync();
    },
    //单选
    switchSelect: function(index) {
      let that = this,
        cart = that.cartList.valid[index],
        i = this.checkedIds.indexOf(cart.id);
      cart.checked = !cart.checked;

      if (i !== -1) this.checkedIds.splice(i, 1);
      if (cart.checked) {
        this.checkedIds.push(cart.id);
      }
      let len = that.cartList.valid.length;
      let selectnum = [];
      for (let i = 0; i < len; i++) {
        if (that.cartList.valid[i].checked === true) {
          selectnum.push(true);
        }
      }
      that.isAllSelect = selectnum.length === len;
      that.$set(that, "cartList", that.cartList);
      that.$set(that, "isAllSelect", that.isAllSelect);
      cookie.set(CHECKED_IDS, that.checkedIds);
      that.carnum();
      that.countMoney();
    },
    //全选
    allChecked: function() {
      let that = this;
      let selectAllStatus = that.isAllSelect;
      selectAllStatus = !selectAllStatus;
      let checkedIds = [];
      // for (let i = 0; i < array.length; i++) {
      //   array[i].checked = selectAllStatus;
      //   checked.push()
      // }
      that.cartList.valid.forEach(cart => {
        cart.checked = selectAllStatus;
        if (selectAllStatus) checkedIds.push(cart.id);
      });
      that.$set(that, "cartList", that.cartList);
      that.$set(that, "isAllSelect", selectAllStatus);
      this.checkedIds = checkedIds;
      cookie.set(CHECKED_IDS, checkedIds);
      that.carnum();
      that.countMoney();
    },
    //数量
    carnum: function() {
      let that = this;
      var carnum = 0;
      var array = that.cartList.valid;
      for (let i = 0; i < array.length; i++) {
        if (array[i].checked === true) {
          carnum += parseInt(array[i].cart_num);
        }
      }
      that.$set(that, "cartCount", carnum);
    },
    //总共价钱；
    countMoney: function() {
      let that = this;
      let carmoney = 0;
      let array = that.cartList.valid;
      for (let i = 0; i < array.length; i++) {
        if (array[i].checked === true) {
          carmoney = add(carmoney, mul(array[i].cart_num, array[i].truePrice));
        }
      }
      that.countmoney = carmoney;
    }
  }
};
</script>
<style scoped>
  .c-header {
    padding: 0;
  }
  .c-main {
    padding: 20px 0 ;
    background-color: #fff;
  }
  .c-main .m-body {
    width: 1090px;
    margin: 0 auto;
    padding-bottom: 40px;
  }
  .c-main .m-body .b-tt {
    width: 1090px;
    height: 46px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
    padding: 12px 0;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    border: 1px solid #ddd;
  }
  .c-main .m-body .b-item {
    width: 1088px;
    height: 140px;
    padding: 20px 0;
    border: 1px solid #ddd;
    background-color: #fffbf0;
    margin-bottom: 12px;
  }
   .c-main .m-body .b-item .i-1 {
     width: 59px;
     height: 20px;
     margin-top: 40px;
     padding-left: 40px;
   }
   .c-main .noCart {
     width: 1090px;
     height: 696px;
     border: 1px solid #ddd;
     margin: 0 auto;
   }
   .c-main .noCart .image{
     width: 414px;
     height: 336px;;
   }
   .c-main .noCart .image img {
     width: 100%;
     height: 100%;
   }
   .c-main .noCart .btn {
     width: 414px;
     padding-top: 10px;
   }
  .c-main .noCart .btn p{
    font-size: 16px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    padding: 2px 20px;
    line-height: 24px;
  }
  
   .c-main .m-body .b-item .i-2 {
    width: 98px;
    height: 98px;
   }
   .c-main .m-body .b-item .i-2 img{
    width: 100%;
    height: 100%;
   }
   .c-main .m-body .b-item .i-3 {
    width: 300px;
    height: 100px;
    padding-top: 10px;
    padding-left: 10px;
   }
   .c-main .m-body .b-item .i-3 .name {
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
   }
   .c-main .m-body .b-item .i-3  .text {
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 12px;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
   }
   .c-main .m-body .b-item .i-4{
    width: 180px;
    height: 78px;
    padding-top: 10px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 14px;
    color: #333;
   }
   .c-main .m-body .b-item .i-5{
    width: 170px;
    height: 30px;
   }
    .c-main .m-body .b-item .i-5 .num .numList3 {
    font-family: "Microsoft Yahei", "微软雅黑", verdana;
    font-size: 13px;
    height: 24px;
    line-height: 24px;
    width: 60px;
    margin-top: -5px;
    text-align: center;
    border-top: 1px solid #a4a4a4;
    border-bottom: 1px solid #a4a4a4;
    cursor: pointer;
    background-color: #fff;
  }
.c-main .m-body .b-item .i-5 .num .numList2 p{
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  font-size: 13px;
  height: 24px;
  line-height: 24px;
  width: 24px;
  margin-top: -8px;
  text-align: center;
  border: 1px solid #a4a4a4;
  cursor: pointer;
  font-weight:500;
  background-color: #fff;
}
.c-main .m-body .b-item .i-5 .num .numList2.on p{
  color: #d3d3d3;
  cursor: no-drop;
  
}
   .c-main .m-body .b-item .i-6{
    width: 150px;
    height: 34px;
    padding-top: 10px;
    padding-right: 30px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 14px;
    color: #333;
   }
   .c-main .m-body .b-item .i-7{
    width: 129px;
    height: 48px;
    padding-left: 31px;
    padding-top: 10px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 14px;
    color: #333;
   }
  .c-main .m-body .b-total {
    width: 1090px;
    height: 70px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
  }
  .c-main .m-body .b-total .t-w1 {
    width: 488px;
    height: 70px;
  }
  .c-main .m-body .b-total .t-w1 .l1 {
    width: 139px;
    height: 19px;
    margin-left: 17px;
  }
  .c-main .m-body .b-total .t-w1 .l1 .l-all {
    height: 19px;
  }
  .c-main .m-body .b-total .t-w1 .l1 .l-input {
    width: 14px;
    height: 14px;
    margin-left: 17px ;
    margin-right: 4px;
  }
  .c-main .m-body .b-total .t-w1 .l2 {
    width: 56px;
    height: 19px;
    cursor: pointer;
  }
  .c-main .m-body .b-total .t-w1 .l3 {
    width: 84px;
    height: 19px;
    margin-left: 30px;
    cursor: pointer;
  } 
  .c-main .m-body .b-total .t-w1:hover .l2:hover{
    color: #CC9756;
  }
  .c-main .m-body .b-total .t-w1:hover .l3:hover{
    color: #CC9756;
  }
  .c-main .m-body .b-total .t-w2 {
    width: 229px;
    height: 50px;
    margin: 10px 0;
    padding: 0 30px;
    border-right: 1px solid #ddd;
  }
  .c-main .m-body .b-total .t-w2 .l2 {
    width: 168px;
  }
  .c-main .m-body .b-total .t-w2 .line1 {
    width: 169px;
    height: 30px;
    padding-top: 6px;
  }
  .c-main .m-body .b-total .t-w2 .l2  .label {
    width: 63.66px;
  }
  .c-main .m-body .b-total .t-w2 .label,.num {
    font-size: 14px;
    color: #999;
    line-height: 14px;
    height: 14px;
  }
  .c-main .m-body .b-total .t-w2 .num {
    width: 100px;
  }
  .c-main .m-body .b-total .t-w3 {
    width: 231px;
    height: 94px;
    padding: 0 30px;
  }
  .c-main .m-body .b-total .t-w3  .pay {
    width: 171px;
    height: 29px;
    margin-top: 12px;
  }
   .c-main .m-body .b-total .t-w3  .pay .p1 {
     width: 70px;
     height: 22px;
     font-size: 14px;
     color: #333;
     margin-right: 20px;
   }
   .c-main .m-body .b-total .t-w3  .pay .p2 {
     font-weight: 700;
     color: #BE4141;
     font-size: 22px;
     line-height: 22px;
      top: 2px;
      bottom: 2px;
   }
   .c-main .m-body .b-total .t-w3  .pay .line {
     width: 170px;
     height: 22px;
     padding-top: 8px;
     color: #d3282d;
     font-size: 14px;
   }
  .c-main .m-body .b-total .t-w4 {
    width: 140px;
    height: 70px;
    color: #fff;
    border: 1px solid #b4a078;
    background-color: #b4a078;
    text-align: center;
    line-height: 70px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 18px;
    cursor: pointer;
  }
  .c-main .m-body .b-total .t-w4:hover
  {
    background-color: #C0AE8A;
  }
  .c-main .m-body .b-tt .t-chkbox {
    width: 139px;
    height: 20px;
    margin-left: 20px;
  }
  .c-main .m-body .b-tt .t-chkbox .c-input {
    width: 14px;
    height: 14px;
    margin-left: 17px ;
    margin-right: 4px;
    margin-top: -1px;
  }
  .c-main .m-body .b-tt .t-chkbox .c-all {
    width: 26px;
    height: 19px;
  }
  .c-main .m-body .b-tt  .t-w2 {
    width: 300px;
    height: 19px;
    text-align: left;
  }
  .c-main .m-body .b-tt  .t-w3 {
    width: 180px;
    height: 19px;
    text-align: center;
  }
  .c-main .m-body .b-tt .t-w4 {
    width: 170px;
    height: 19px;
    text-align: center;
  }
  .c-main .m-body .b-tt .t-w5 {
    width: 150px;
    height: 19px;
    padding-right: 30px;
    text-align: right;
  }
  .c-main .m-body .b-tt .t-w6 {
    width: 129px;
    height: 19px;
    padding-left: 31px;
    text-align: left;
  }
</style>